<template>
  <div class="menu-grid sa-flex sa-flex-wrap">
    <template v-for="item in compData.data.list" :key="item">
      <div
        class="menu-item"
        :style="{
          width: 100 / compData.data.col + '%',
          // 'border-right-width':
          //   !compData.data.border || (lindex + 1) % compData.data.col == 0
          //     ? '0'
          //     : '1px',
          // 'border-bottom-width':
          //   !compData.data.border ||
          //   lindex + 1 >
          //     compData.data.list.length -
          //       (compData.data.list.length % compData.data.col)
          //     ? '0'
          //     : '1px',
        }"
      >
        <div
          class="badge"
          v-if="item.badge.show"
          :style="{ background: item.badge.bgColor, color: item.badge.color }"
        >
          {{ item.badge.text }}
        </div>
        <sa-image :url="item.src" size="28" radius="0" :suffix="null"></sa-image>
        <div class="title" :style="{ color: item.title.color }">
          {{ item.title.text }}
        </div>
        <div class="tip sa-m-t-6" :style="{ color: item.tip.color }">
          {{ item.tip.text }}
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .menu-grid {
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 13px;
      // border-right: solid #eee;
      // border-bottom: solid #eee;
      position: relative;
      padding: 20px 0 14px;
      .title {
        height: 16px;
        line-height: 16px;
        margin-top: 8px;
        font-size: 12px;
      }
      .tip {
        height: 12px;
        line-height: 12px;
        font-size: 10px;
        color: #faad14;
      }
      .badge {
        position: absolute;
        top: 20px;
        left: 50%;
        z-index: 1;
        padding: 0 6px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        border-radius: 6px 6px 6px 0;
      }
    }
  }
</style>
